<template>
  <div class="container">
    <el-card class="card" shadow="hover">
      <div ref="repeatBuy" style="width: 100%; height: 760px"></div>
    </el-card>
  </div>
</template>

<script lang="js" setup>
import { onMounted, ref } from 'vue';
import * as echarts from 'echarts/core';
import {
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    VisualMapComponent,
    MarkAreaComponent
} from 'echarts/components';
import { LineChart } from 'echarts/charts';
import { UniversalTransition } from 'echarts/features';
import { CanvasRenderer } from 'echarts/renderers';
import { getRepeatBuyCycle, getRepeatBuyRatio } from '@/api/index';
import { useRouter } from 'vue-router';

echarts.use([
    TitleComponent,
    ToolboxComponent,
    TooltipComponent,
    GridComponent,
    VisualMapComponent,
    MarkAreaComponent,
    LineChart,
    CanvasRenderer,
    UniversalTransition
]);

const repeatBuy = ref(null);
const repeatBuyRate = ref(''); // 修改初始值为空字符串
const router = useRouter();

onMounted(async () => {

    const ratioData = await getRepeatBuyRatio(router);

    if (ratioData && ratioData.length > 0) {
        repeatBuyRate.value = (ratioData[0].ratio * 100).toFixed(2) + '%';
    }

    const data = await getRepeatBuyCycle(router);
    if (!data) return;

    const categories = data.map(item => `${item.category} 天`);
    const repeatBuyCycle = data.map(item => item.repeatBuyCycle);

    var myChart = echarts.init(repeatBuy.value);
    var option;

    option = {
        title: {
            text: '用户复购行为分析 & 复购率 = [' + repeatBuyRate.value + ']',
            subtext: '基于PV展示用户的复购周期',
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross'
            },
            formatter: function (params) {
                let result = params[0].name + '<br/>';
                params.forEach(item => {
                    result += item.marker + item.seriesName + ' : ' + item.value + ' 次<br/>';
                });
                return result;
            }
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: true },
                restore: { show: true },
                saveAsImage: { show: true },
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: categories
        },
        yAxis: {
            type: 'value',
            axisLabel: {
                formatter: '{value} PV'
            },
            axisPointer: {
                snap: true
            }
        },
        grid: {
            right: "5%",
        },
        series: [
            {
                name: '复购PV',
                type: 'line',
                smooth: true,
                data: repeatBuyCycle,
                markArea: {
                    itemStyle: {
                        color: 'rgba(63, 151, 255, 0.4)'
                    },
                    data: [
                        [
                            {
                                name: '典型复购周期开始',
                                xAxis: 4
                            },
                            {
                                xAxis: 5
                            }
                        ],
                        [
                            {
                                name: '另一个重要复购周期',
                                xAxis: 14
                            },
                            {
                                xAxis: 15
                            }
                        ]
                    ]
                }
            }
        ]
    };

    option && myChart.setOption(option);
});
</script>

<style scoped>
.container {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.card {
  margin-bottom: 20px;
}

.card:last-child {
  margin-bottom: 0;
}
</style>
